import { SmileOutlined } from '@ant-design/icons';
import { DrawerForm, ProCard } from '@ant-design/pro-components';
import { Alert, Card, Result, Space, Spin } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
import { useAccess } from 'umi';
import AreaReleaseMediaOverview from '../record/AreaReleaseMediaOverview';
import AreaDisseminationPriorityOverview from '../priority/AreaDisseminationPriorityOverview';
import TableRecordDisseminationPriorityPlatform from '../priority/TableRecordDisseminationPriorityPlatform';
import TableRecordReleaseMedia from '../record/TableRecordReleaseMedia';
import AreaOverview from '../analysis/AreaOverview';

interface ReportDetialProps {
  item: AssessAnalysisData.Overview;
  areaId: string;
  areaName: string;
  quarter: number; //季度
  releaseTimes: Array<string>; //季度发布时间范围
  onRefurbish: () => void;
}

const getQuarterStr = (quarter: number): string => {
  if (quarter == 1) {
    return '第一季度';
  } else if (quarter == 2) {
    return '第二季度';
  } else if (quarter == 3) {
    return '第三季度';
  } else if (quarter == 4) {
    return '第四季度';
  } else {
    return '';
  }
};

const ReportDetial: React.FC<ReportDetialProps> = ({
  item,
  areaId,
  areaName,
  quarter,
  releaseTimes,
  onRefurbish,
}) => {
  const access = useAccess();

  const [tab, setTab] = useState('releaseMedia');

  return (
    <DrawerForm
      title={
        <Space>
          {areaName}
          <span>{getQuarterStr(quarter)}</span>
          文化报表数据报告
        </Space>
      }
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      trigger={
        <div
          style={{
            paddingLeft: 10,
            paddingRight: 10,
            paddingBottom: 10,
          }}
        >
          <div
            style={{
              borderRadius: 12,
              background: '#FFF',
              // backgroundImage: 'url(https://www.freeimg.cn/i/2023/10/24/6537c64da6294.png) no-repeat',
            }}
          >
            <Card
              hoverable
              style={{
                background: 'linear-gradient(#F5FBFF,#fff, #fff)',
              }}
            >
              <Card.Meta
                title={
                  <div>
                    <span>{item.areaName}</span>
                  </div>
                }
              />
            </Card>
          </div>
        </div>
      }
      submitter={false}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: "100%",
      }}
      onOpenChange={(visible) => {
        if (visible) {
        } else {
          onRefurbish();
        }
      }}
      submitTimeout={2000}
      onFinish={async (values) => { }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={false}
      >
        <Alert
          message="评价各区县在中央主要媒体、市属主要媒体刊发正面新闻报道情况及相关报道传播情况，广告类报道不计分。"
          type="success"
          showIcon
        />
        <AreaOverview areaId={areaId} releaseTimes={releaseTimes} />

        <ProCard
          bodyStyle={{
            padding: 0,
          }}
          tabs={{
            activeKey: tab,
            items: [
              {
                label: (
                  <span
                    style={{
                      fontSize: 16,
                    }}
                  >
                    发稿情况
                  </span>
                ),
                key: 'releaseMedia',
                children: (
                  <>
                    <AreaReleaseMediaOverview areaId={areaId} releaseTimes={releaseTimes} />
                    {/* <TableRecordReleaseMedia
                      areaId={areaId}
                      areaName={areaName}
                      releaseTimes={releaseTimes}
                      onRefurbish={() => {}}
                    /> */}
                  </>
                ),
              },
              {
                label: (
                  <span
                    style={{
                      fontSize: 16,
                    }}
                  >
                    重点报道传播力评价
                  </span>
                ),
                key: 'disseminationPriorityPlatform',
                children: (
                  <>
                    <AreaDisseminationPriorityOverview
                      areaId={areaId}
                      releaseTimes={releaseTimes}
                    />
                    {/* <TableRecordDisseminationPriorityPlatform
                      areaId={areaId}
                      areaName={areaName}
                      releaseTimes={releaseTimes}
                      onRefurbish={() => {}}
                    /> */}
                  </>
                ),
              },
              {
                label: (
                  <span
                    style={{
                      fontSize: 16,
                    }}
                  >
                    推动正能量登上热搜热榜评价
                  </span>
                ),
                key: 'disseminationTophub',
                children: (
                  <Result
                    icon={<SmileOutlined />}
                    title="该功能正在开发中，敬请期待!"
                  // extra={<Button type="primary">Next</Button>}
                  />
                ),
              },
            ],
            onChange: (key) => {
              setTab(key);
            },
          }}
        />

        {/* <TableRecordDisseminationPriorityPlatform
          onRefurbish={() => {
            
          }}
        />
        <TableRecordDisseminationTophub
          onRefurbish={() => {
            
          }}
        /> */}
      </Spin>
    </DrawerForm>
  );
};
export default ReportDetial;
